"use client"
import Head from 'next/head'
import Image from 'next/image'
import moment from 'moment';
import 'moment/locale/zh-cn'

import { useState } from 'react';
import { ConfigProvider, theme, Button, Form, Input, Select } from 'antd';
const { Option } = Select;

import styles from './search.module.scss';
import Layout from '../components/layout'
import HeadBar from '../components/headbar'
import Notification from '../components/notification'
import BottomBar from '../components/bottombar'

import Card from '../components/card'
import More from '../components/more';

export default function CheckIn() {


    return (
        <>
            <Head>
                <title>电子班牌</title>
            </Head>
            <HeadBar />
            <Layout>
                <div className={styles.search}>
                    <Search />
                </div>
            </Layout>
            <BottomBar />
        </>
    )
}

function Search() {
    const [name, setName] = useState("");
    const [course, setCourse] = useState();

    const onNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setName(e.target.value);
    };

    const onCourseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setName(e.target.value);
    };
    const onFinish = (values: any) => {
        console.log('Received values from form: ', values);
    };
    return (
        <ConfigProvider
            theme={{
                algorithm: theme.darkAlgorithm,
            }}
        >
            <Form
                name="checkin"
                layout="inline"
                colon={false}
                onFinish={onFinish}
            >
                <Form.Item name="name" label={<span style={{ fontSize: '20px', height: '60px', lineHeight: '4.8' }}>姓名</span>} style={{ marginRight: '50px' }}>
                    <Input
                        type="text"
                        value={name}
                        onChange={onNameChange}
                        style={{ width: '320px', fontSize: '20px', padding: '20px', borderRadius: '12px' }}
                    />
                </Form.Item>
                <Form.Item name="course" label={<span style={{ fontSize: '20px', height: '60px', lineHeight: '4.8' }}>课程</span>} style={{ marginRight: '730px' }}>
                    <Select
                        value={course}
                        onChange={onCourseChange}
                        style={{ width: '320px', height: '72px', fontSize: '20px', borderRadius: '12px' }}
                    >
                        <Option value="rmb">RMB</Option>
                        <Option value="dollar">Dollar</Option>
                    </Select>
                </Form.Item>
                <Form.Item style={{ marginRight: '40px' }}>
                    <Button type="primary" htmlType="submit" style={{
                        width: '120px',
                        height: '68px',
                        background: '#FFFFFF',
                        borderRadius: '12px',
                        fontWeight: 600,
                        fontSize: '20px',
                        color: '#1a1f2b'
                    }}>
                        查询
                    </Button>
                </Form.Item>
                <Button type="default" style={{
                    width: '120px',
                    height: '68px',
                    borderRadius: '12px',
                    border: '2px solid #fff',
                    background: 'transparent',
                    fontWeight: 600,
                    fontSize: '20px',
                    color: '#fff'
                }}>
                    重置
                </Button>
            </Form >
        </ConfigProvider >
    )
}

function Posts() {
    return (
        <>
            {/* <div className={styles.post}>
                <div className={styles.date}>
                    <span className={styles.line1}>{moment().format("M/D")}</span>
                    <span className={styles.divider} />
                    <span className={styles.line2}>{moment().format("YYYY")}年</span>
                </div>
                <div className={styles.content}>
                    2024年暑假放假通知和工作2024年暑假放假通知和工作2024年暑假放假通知和工作
                </div>
            </div>
            <div className={styles.post}>
                <div className={styles.date}>
                    <span className={styles.line1}>{moment().format("M/D")}</span>
                    <span className={styles.divider} />
                    <span className={styles.line2}>{moment().format("YYYY")}年</span>
                </div>
                <div className={styles.content}>
                    江西应用科技学院：持续进江西应用科技学院：持续进
                </div>
            </div> */}
        </>
    )
}